<template>
  <div>
    <h1>动态组件</h1>
    <button @click="demo = 'UserName'">账号密码填写</button>
    <button @click="demo = 'UserInfo'">个人信息填写</button>
    <p>下面显示注册组件-动态切换:</p>
    <div style="border: 1px solid red">
      <!-- Vue内置keep-alive组件, 把包起来的组件缓存起来 -->
      <keep-alive>
        <component :is="demo"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import UserName from "./components/UserName.vue";
import UserInfo from "./components/UserInfo.vue";
//演示1: 可以先给UserName.vue和UserInfo.vue 注册created和destroyed生命周期事件, 观察创建和销毁过程
//演示2: 使用keep-alive内置的vue组件, 让动态组件缓存而不是销毁
export default {
  data() {
    return {
      demo: "UserName",
    };
  },
  components: {
    UserName,
    UserInfo,
  },
};
</script>

<style>
</style>